<template>

	<view class="container backgroundClass">

		<!-- 产品列表 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption" @up="getProductList"
			:fixed="true">
			<view class="tui-coupon-info">
				<view class="groupContent" v-for="(item,index) in bargainData" :key='index'>
					<view class="groupUser">
						<image class="imgClass" :src="item.headimgurl||'/static/img/mine_def_touxiang_3x.png'" mode="">
						</image>
						<view class="">
							<text>{{item.nickName ||'匿名'}}</text>
							<view class="countdownBox">
								<view class="grouoNumber">
									共{{item.memberNum}}人，剩余
								</view>
								<tui-countdown :time="tabConut(item.bargainEndDate)" color="#333" colonColor="#333"
									bcolor="transparent" bgcolor="transparent" @end="endOfTime"></tui-countdown>
							</view>
						</view>

					</view>
					<view class="groupButton" @tap="joinGroupon(item.bargainId)">
						去参团
					</view>

				</view>
			</view>
		</mescroll-body>


		<loading></loading>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import mixin from "@/utils/mixin.js"
	import tuiCountdown from "@/packageA/components/countdown/countdown"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [mixin, MescrollMixin],
		components: {
			tuiCountdown,
		},
		data() {
			return {
				productId: "",
				bargainData: [],
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				},
			}
		},
		onLoad(options) {
			if (options.productId) {
				this.productId = options.productId
			}
			// this.bargain(this.productId);
		},
		mounted() {
			console.log(this.productId)
			// this.bargain(this.productId);
		},
		methods: {
			joinGroupon(id) {
				uni.navigateTo({
					url: '../../../packageB/pages/groupon/otherGroupon?bargainId=' + id
				})
			},
			//下单时间 与 现在的时间差
			tabConut(date) {
				if (date) {
					let datatime = date.replace(/\-/g, "/")
					let paymentTime = 0
					var oDate2 = new Date(datatime);
					var oDate1 = new Date();
					var time = oDate2.getTime() - oDate1.getTime()
					console.log(time)
					paymentTime = Math.floor(time / 1000);
					console.log(paymentTime)
					return paymentTime
				} else {
					return
				}

			},
			endOfTime() {
				console.log(111111)
			},
			getProductList(page) {
				let params = {
					current: page.num,
					pageSize: page.size,
					productId: this.productId,
					bargainStatus: 0
				};
				this.$http.bargain(params).then((res) => {
					if (res.status === 0) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.bargainData = []
						};
						this.bargainData = this.bargainData.concat(curPageData);
						console.log(this.bargainData)
					}
				}).catch(() => {
					this.mescroll.endErr()
				});
			},
			bargain(id) {
				let param = {
					productId: this.productId
				}
				this.$http.bargain(param).then((res) => {
					if (res.status === 0) {
						console.log(res.data);
						this.bargainData = res.data.records
					}
				})
			},
			back() {
				uni.navigateBack()
			},
		},

	}
</script>

<style lang="scss">

	.backgroundClass {
		background-color: #f7f7f7;
	}

	.tui-coupon-info {
		// padding: 25rpx;
	}

	.groupContent {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// border-top: 1px solid #f2f2f2;
		// margin: 0 30rpx 20rpx 30rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: #fff;

		.groupUser {
			display: flex;
			align-items: center;
			font-size: 28rpx;

			.imgClass {
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
				border-radius: 50%;
			}

			.countdownBox {
				display: flex;
				align-items: center;

				.grouoNumber {
					margin-right: 20rpx;
				}
			}

		}

		.groupButton {
			background-image: linear-gradient(to right, #FE356C, #FC5F66);
			border-radius: 10rpx;
			padding: 5rpx 20rpx;
			color: #fff;
			font-size: 28rpx;
		}
	}
</style>
